<template>
  <div id="mainbox">
    <div id="main" style="width: 700px;height: 700px"></div>
    <p>请及时修改未知学生数据</p>
    <!-- 调试信息，可根据需要删除 -->
    <div class="debug" v-if="debug">
      男生: {{ boy }}, 女生: {{ girl }}, 总计: {{ total }}, 未定义: {{ undefinedCount }}
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getStuNumber } from "../../Api/User";

export default {
  name: "studentsData",
  data() {
    return {
      myChart: null,
      boy: 0, // 存储男生数量
      girl: 0, // 存储女生数量
      total: 0,
      debug: true // 调试用，可改为false关闭
    }
  },
  computed: {
    // 计算未定义的数量（总数 - 男生 - 女生）
    undefinedCount() {
      return this.total - this.boy - this.girl;
    }
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('main');
      if (!chartDom) {
        console.error('未找到图表容器元素');
        return;
      }

      this.myChart = echarts.init(chartDom);
      this.updateChart(); // 初始化时更新图表
    },

    updateChart() {
      if (!this.myChart) return;

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '学生性别分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.boy, name: '男生' }, // 男生数据对应“男生”标签
              { value: this.girl, name: '女生' }, // 女生数据对应“女生”标签
              { value: this.undefinedCount, name: '未定义' },
            ]
          }
        ]
      };

      this.myChart.setOption(option);
    },

    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },

    // 获取所有数据：关键修改——参数与性别对应关系（0=女，1=男）
    async fetchAllData() {
      try {
        // 定义参数：0对应女生，1对应男生，-1对应总数（与后端一致）
        const girlParam = { sex: 0 }; // 0 → 女生
        const boyParam = { sex: 1 };  // 1 → 男生
        const totalParam = { sex: -1 }; // -1 → 总数

        // 并行请求数据：按参数对应关系存储到正确变量
        const [girlRes, boyRes, totalRes] = await Promise.all([
          getStuNumber(girlParam), // 0参数的结果 → 女生数量
          getStuNumber(boyParam),  // 1参数的结果 → 男生数量
          getStuNumber(totalParam)
        ]);

        // 解析数据：确保变量与性别正确匹配
        this.girl = girlRes.data || 0; // 0参数结果赋值给女生
        this.boy = boyRes.data || 0;   // 1参数结果赋值给男生
        this.total = totalRes.data || 0;

        // 数据更新后重新渲染图表
        this.updateChart();
      } catch (error) {
        console.error('获取数据失败:', error);
        // 出错时显示默认数据，避免图表空白
        this.boy = 1;
        this.girl = 1;
        this.total = 3;
        this.updateChart();
      }
    }
  },
  mounted() {
    this.initChart();
    this.fetchAllData(); // 加载数据
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  }
}
</script>

<style scoped>
#mainbox{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

.debug {
  color: #666;
  font-size: 14px;
  padding: 5px 10px;
  background: #f5f5f5;
  border-radius: 4px;
}
</style>